<script setup lang="ts">
import { ref, watch } from 'vue'
import { roleStore } from '@/stores/role'
// 走马灯
import Carousel from '@/components/Carousel/Carousel.vue'
// top10出库金额占比
import Top10MoneyBar from '@/components/PermissionsModule/Supply/components/Top10MoneyBar.vue'
// top10出库数量占比
import Top10CountBar from '@/components/PermissionsModule/Supply/components/Top10CountBar.vue'
// 国家库存结构
import CountrySthBar from '@/components/PermissionsModule/Supply/components/CountrySthBar.vue'
// 库存变化趋势
import GlobalOutStockLine from '@/components/PermissionsModule/Supply/components/globalOutStockLine.vue'
// 呆滞库存
import GlobalDeadInventory from '@/components/PermissionsModule/Supply/components/globalInventoryUnSaleable.vue'

const store = roleStore() as any
const { supplyLevel } = store

const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = supplyLevel
}
info()
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = supplyLevel // 初始化面板权限

// 深度监听 store.supplyLevel
watch(
  () => store.supplyLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
</script>

<template>
  <Carousel class="carousel" :interval="5000">
    <!-- 全球畅销品top10出库金额占比 -->
    <el-carousel-item>
      <Top10MoneyBar :level="newRole" />
    </el-carousel-item>
    <!-- 全球畅销品top10出库数量占比 -->
    <el-carousel-item>
      <Top10CountBar :level="newRole" />
    </el-carousel-item>
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <!-- 库存数量与出库数量对比 -->
    <el-carousel-item>
      <GlobalOutStockLine :level="newRole" />
    </el-carousel-item>
    <!-- 国家库存结构 这个初级才有,其他级别没有,是个柱状图 -->
    <el-carousel-item v-if="newRole == 3">
      <CountrySthBar :level="newRole" />
    </el-carousel-item>
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <!-- 呆滞库存 -->
    <GlobalDeadInventory />
  </Carousel>
</template>

<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 250px;
  }
}
</style>
